import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
  } from '@ant-design/icons';
  import { Menu} from 'antd';
  import type { MenuProps } from 'antd';
  import {useNavigate,useLocation} from 'react-router-dom'
  import { useState } from 'react';
type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
    {
        label: '栏目1',
        key: '/page1',
        icon: <PieChartOutlined />
    },
    {
        label: '栏目2',
        key: '/page2',
        icon: <DesktopOutlined />
    },
    {
        label: '栏目3',
        key: '/page3',
        icon: <UserOutlined />,
        children:[
            {
                label: '栏目 301',
                key: '/page3/page301'
            },
            {
                label: '栏目 302',
                key: '/page3/page302'
            },
            {
                label: '栏目 303',
                key: '/page3/page303'
            }
        ]
    },
    {
        label: '栏目4',
        key: '/page4',
        icon: <TeamOutlined />,
        children:[
            {
                label: '栏目 401',
                key: '/page3/page401'
            },
            {
                label: '栏目 402',
                key: '/page3/page402'
            }
        ]
    },
    {
        label: '栏目5',
        key: '/page5',
        icon: <FileOutlined />
    },
]

const Comp: React.FC = () => {
  const navigateTo = useNavigate()
  const currentRoute = useLocation()
  console.log(currentRoute.pathname, '11111')
  const menuClick = (e:{key:string}) => {
    console.log(e, 'eqw')
    // 点击跳转到对应的路由，编程式导航跳转，利用到一个hook
    navigateTo(e.key)
  }
  let firstOpenKey:string = ''
  // 在这里进行对比
  function findKey(obj:{key:string}) {
      return obj.key === currentRoute.pathname
  }
  // 多对比的是多个children
  for(let i=0; i<items.length; i++){
      // 判断找到找不到
      // items[i]['children'].find(findKey)这结果如果找到拿到的，就是找到的这个对象，转布尔值就是true,如果找不到转布尔值就是false
      if(items[i]!['children'] && items[i]!['children'].length > 0 && items[i]!['children'].find(findKey)){
          firstOpenKey = items[i]!.key as string
          break
      }
  }
  // 设置展开项的初始值
  const [openKeys, setOpenKeys] = useState([firstOpenKey]);
  const onOpenChange = (keys:string[]) => {
    // 什么时候执行这个函数里面的代码？展开和回收某项菜单的时候执行这里的代码
    // console.log(keys) // keys是一个数组，记录了当前哪一项是展开的（用key开记录）
    // 把这个数组修改成最后一项，因为只要一项是展开的，就是我刚刚点击的这一项
    setOpenKeys([keys[keys.length-1]])
  }
  // const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
  // const onOpenChange: MenuProps['onOpenChange'] = (keys:string[]) => {
  //   const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
  //   if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
  //     setOpenKeys(keys);
  //   } else {
  //     setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
  //   }
  // };
  return (
    <Menu 
        theme="dark" 
        // defaultSelectedKeys 表示当前样式所在选中项的key
        defaultSelectedKeys={[currentRoute.pathname]} 
        mode="inline" 
        items={items} 
        onClick={menuClick}
        // 当前菜单展开项的key数组
        openKeys={openKeys}
        // 某项菜单展开和回收的事件
        onOpenChange={onOpenChange}
    />
  )
}
export default Comp